<template>
    <div class="content-wrapper-view">
        <div class="menu-wrapper">
            <el-row>
                <el-col :span="4" class="tree-box">
                    <div class="tree-box-header">
                        菜单树
                    </div>
                    <div class="tree-box-body">
                        <el-tree :data="tree" node-key="id" ref="tree" v-loading="loadingTree" highlight-current :check-strictly="true" :default-expand-all="true" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
                    </div>
                </el-col>

                <el-col :span="20" class="content-box">
                    <el-row>
                        <el-col>
                            <div class="btn-wrapper">
                                <el-button type="primary" size="medium" icon="el-icon-plus" @click="handleCreate">添加</el-button>
                                <el-button type="primary" size="medium" icon="el-icon-edit" @click="handleUpdate">修改</el-button>
                                <el-button type="danger" size="medium" icon="el-icon-delete" @click="handleDelete">删除</el-button>
                                <el-button type="primary" size="medium" icon="el-icon-mars-reset" @click="handleResetFilter">刷新</el-button>
                                <el-button type="primary" size="medium" icon="el-icon-mars-reset" @click="handleCreatePermission" :disabled="detail.id?false:true">添加权限</el-button>
                                <el-button type="danger" size="medium" icon="el-icon-delete" @click="handleDeletePermission">批量删除</el-button>
                                <el-button type="primary" size="medium" icon="el-icon-mars-reset" @click="handleGenerateDefaultPermission" :disabled="detail.id?false:true">生成默认权限</el-button>
                            </div>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col>
                            <div class="detail-wrapper">
                                <el-form ref="detail" :model="detail" label-width="120px">

                                    <el-form-item label="所属上级">
                                        <el-input v-model="detail.parentName" placeholder="无上级" readonly style="width: 60%;"></el-input>
                                    </el-form-item>
                                    <el-form-item label="菜单名称" prop="name">
                                        <el-input v-model="detail.name" placeholder="菜单名称" style="width: 60%;"></el-input>
                                    </el-form-item>
                                    <el-form-item label="资源地址" prop="resource">
                                        <el-input v-model="detail.resource" placeholder="资源地址" style="width: 60%;"></el-input>
                                    </el-form-item>
                                    <el-form-item label="前端组件" prop="component">
                                        <el-input v-model="detail.component" placeholder="前端组件" style="width: 60%;"></el-input>
                                    </el-form-item>
                                    <el-form-item label="前端地址" prop="path">
                                        <el-input v-model="detail.path" placeholder="iFrame嵌套地址" style="width: 60%;"></el-input>
                                    </el-form-item>
                                    <el-form-item label="请求方法" prop="path">
                                        <el-radio-group v-model="detail.method">
                                            <el-radio label="GET" border size="medium">GET</el-radio>
                                            <el-radio label="POST" border size="medium">POST</el-radio>
                                            <el-radio label="PUT" border size="medium">PUT</el-radio>
                                            <el-radio label="DELETE" border size="medium">DELETE</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="状态" prop="path">
                                        <el-row style="color: #606266;">
                                            <el-col :span="3">
                                                <el-tag type="success" v-if="detail.status === true">正常</el-tag>
                                                <el-tag type="danger" v-else>禁用</el-tag>
                                            </el-col>
                                            <el-col :span="7">
                                                排序
                                                <el-input-number v-model="detail.sort" :min="100" :max="9999" style="width: 150px;"></el-input-number>
                                            </el-col>
                                            <el-col :span="4" style="line-height: 40px;">
                                                图标
                                                <i class="el-icon-share" style="margin-left: 10px;"></i>
                                            </el-col>
                                        </el-row>
                                    </el-form-item>

                                </el-form>
                            </div>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col>
                            <div class="permission-wrapper">
                                <el-row>
                                    <el-col>
                                        <el-table :data="list" border fit highlight-current-row v-loading="listLoading" element-loading-text="给我一点时间" empty-text="-" @selection-change="handleSelectionChange">

                                            <el-table-column type="selection" width="55" align="center"></el-table-column>

                                            <el-table-column label="权限名称" align="center">
                                                <template slot-scope="scope"> {{ scope.row.name }}</template>
                                            </el-table-column>
                                            <el-table-column label="权限标识" align="center">
                                                <template slot-scope="scope"> {{ scope.row.permission }}</template>
                                            </el-table-column>
                                            <el-table-column label="权限类型" align="center">
                                                <template slot-scope="scope">
                                                    <el-tag type="primary" v-if="scope.row.type === '1'">页面</el-tag>
                                                    <el-tag type="success" v-if="scope.row.type === '2'">按钮</el-tag>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="排序值" align="center">
                                                <template slot-scope="scope"> {{ scope.row.sort }}</template>
                                            </el-table-column>
                                            <el-table-column label="状态" width="80px" align="center">
                                                <template slot-scope="scope">
                                                    <el-tag type="success" v-if="scope.row.status === true">正常</el-tag>
                                                    <el-tag type="danger" v-else>禁用</el-tag>
                                                </template>
                                            </el-table-column>

                                            <el-table-column label="操作" width="180px" align="center">
                                                <template slot-scope="scope">
                                                    <el-button size="small" type="primary" icon="edit" @click="handleUpdatePermission(scope.row)">编辑</el-button>
                                                    <el-button size="small" type="danger" icon="delete" @click="handleDeletePermission(scope.row)">删除 </el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>

            <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" @close="handleDialogClose">
                <el-row>
                    <el-col :span="5">
                        <el-tree :data="treeDialog" node-key="id" ref="treeDialog" v-loading="loadingTreeDialog" highlight-current :check-strictly="true" :default-expand-all="true" :props="defaultProps" @node-click="handleNodeClickDialog"></el-tree>
                    </el-col>

                    <el-col :span="19">
                        <el-form ref="form" :model="form" :rules="rules" label-width="120px">

                            <el-form-item label="所属上级">
                                <el-input v-model="form.parentName" placeholder="请选择所属上级" readonly style="width: 90%;">
                                    <i class="el-icon-close el-input__icon" slot="suffix" @click="handleIconRemoveClick"></i>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="菜单名称" prop="name">
                                <el-input v-model="form.name" placeholder="菜单名称" style="width: 90%;"></el-input>
                            </el-form-item>
                            <el-form-item label="资源地址" prop="resource">
                                <el-input v-model="form.resource" placeholder="资源地址" style="width: 90%;"></el-input>
                            </el-form-item>
                            <el-form-item label="请求方法" prop="method">
                                <el-radio-group v-model="form.method">
                                    <el-radio label="GET" border size="medium">GET</el-radio>
                                    <el-radio label="POST" border size="medium">POST</el-radio>
                                    <el-radio label="PUT" border size="medium">PUT</el-radio>
                                    <el-radio label="DELETE" border size="medium">DELETE</el-radio>
                                </el-radio-group>
                                <el-button type="danger" size="mini" icon="el-icon-close" circle @click="handleClearMethod" style="margin-left:10px;"></el-button>
                            </el-form-item>
                            <el-form-item label="前端组件" prop="url">
                                <el-input v-model="form.component" placeholder="前端组件" style="width: 90%;"></el-input>
                            </el-form-item>
                            <el-form-item label="前端地址" prop="url">
                                <el-input v-model="form.path" placeholder="iFrame嵌套地址" style="width: 90%;"></el-input>
                            </el-form-item>
                            <el-form-item label="菜单图标" prop="icon">
                                <el-input v-model="form.icon" placeholder="图标" style="width: 90%;"></el-input>
                            </el-form-item>
                            <el-form-item label="菜单排序" prop="sort">
                                <el-input-number v-model="form.sort" :min="100" :max="9999"></el-input-number>
                            </el-form-item>
                            <el-form-item label="菜单状态" prop="status">
                                <el-radio-group v-model="form.status">
                                    <el-radio :label="true" border size="medium">正常</el-radio>
                                    <el-radio :label="false" border size="medium">禁用</el-radio>
                                </el-radio-group>
                            </el-form-item>

                        </el-form>
                    </el-col>
                </el-row>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancel('form')">取 消</el-button>
                    <el-button v-if="dialogStatus == 'create'" type="primary" @click="create('form')">确 定</el-button>
                    <el-button v-else type="primary" @click="update('form')">确 定</el-button>
                </div>
            </el-dialog>

            <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisiblePermission" @close="handleDialogClosePermission">
                <el-form ref="formPermission" :model="formPermission" :rules="rulesPermission" label-width="120px">

                    <el-form-item label="权限名称" prop="name">
                        <el-input v-model="formPermission.name" placeholder="权限名称" style="width: 80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="权限标识" prop="permission">
                        <el-input v-model="formPermission.permission" placeholder="权限标识" style="width: 80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="类型" prop="type">
                        <el-radio-group v-model="formPermission.type">
                            <el-radio :label='"1"' border size="medium">页面</el-radio>
                            <el-radio :label='"2"' border size="medium">按钮</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="排序" prop="sort">
                        <el-input-number v-model="formPermission.sort" :min="100" :max="9999" size="medium"></el-input-number>
                    </el-form-item>
                    <el-form-item label="状态" prop="status">
                        <el-radio-group v-model="formPermission.status">
                            <el-radio :label="true" border size="medium">正常</el-radio>
                            <el-radio :label="false" border size="medium">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="备注" prop="remarks">
                        <el-input v-model="formPermission.remarks" placeholder="备注" style="width: 80%;"></el-input>
                    </el-form-item>

                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancel('formPermission')">取 消</el-button>
                    <el-button v-if="dialogStatus == 'createPermission'" type="primary" @click="createPermission('formPermission')">确 定</el-button>
                    <el-button v-else type="primary" @click="updatePermission('formPermission')">确 定</el-button>
                </div>
            </el-dialog>

            <el-dialog title="生成默认的菜单权限" :visible.sync="dialogFormVisibleGeneratePermission">
                <el-form ref="formGeneratePermission" :model="formGeneratePermission" :rules="rulesGeneratePermission" label-width="120px">

                    <el-form-item label="权限前缀" prop="prefix">
                        <el-input v-model="formGeneratePermission.prefix" placeholder="权限名称（upms:user）" style="width: 80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="默认权限" prop="permissions">
                        <el-checkbox-group v-model="formGeneratePermission.permissions">
                            <el-checkbox label="ui" border>页面</el-checkbox>
                            <el-checkbox label="add" border>添加</el-checkbox>
                            <el-checkbox label="delete" border>删除</el-checkbox>
                            <el-checkbox label="update" border>修改</el-checkbox>
                            <el-checkbox label="list" border>查询</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>

                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancel('formGeneratePermission')">取 消</el-button>
                    <el-button type="primary" @click="GenerateDefaultPermissionAction('formGeneratePermission')">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import {
    created,
    updated,
    deleted,
    selectOne,
    selectList,
    selectTree
} from "@/api/system/menu";
import {
    created as createdPermission,
    updated as updatedPermission,
    deleted as deletedPermission,
    selectOne as selectOnePermission,
    findPermissionByMenuId,
    generateDefaultPermission
} from "@/api/system/permission";
import valid from "@/libs/rules";

export default {
    name: "Menu",
    data() {
        let required = valid.required();
        return {
            tree: [],
            treeDialog: null,
            loadingTree: false,
            loadingTreeDialog: false,
            dialogFormVisible: false,
            dialogStatus: "",
            textMap: {
                update: "编辑",
                create: "创建",
                createPermission: "添加权限",
                updatePermission: "编辑权限"
            },
            defaultProps: {
                label: "name",
                children: "children"
            },
            form: {
                sort: 100,
                status: true,
                parentName: null
            },
            detail: {},
            rules: {
                example: [required]
            },

            list: null,
            listLoading: false,
            dialogFormVisiblePermission: false,
            multipleSelection: [],
            formPermission: {
                sort: 100,
                type: "2",
                status: true
            },
            rulesPermission: {
                example: [required]
            },

            dialogFormVisibleGeneratePermission: false,
            formGeneratePermission: {
                permissions: ["ui", "add", "delete", "update", "list"]
            },
            rulesGeneratePermission: {
                prefix: [required],
                permissions: [valid.required("至少选择一个")]
            }
        };
    },
    created() {
        this.getTree();
    },
    methods: {
        getTree() {
            //获取菜单树
            this.loadingTree = true;
            selectTree().then(response => {
                this.tree = response.data.data;
                this.treeDialog = response.data.data;
                this.loadingTree = false;
            });
        },
        handleNodeClick(data, node) {
            selectOne(node.data.id).then(response => {
                this.detail = Object.assign({}, response.data.data);
                this.detail.parentName = node.parent.data.name;
                this.formPermission.menuId = node.data.id;

                this.getListPermission(node.data.id);
            });
        },
        handleClearMethod() {
            this.form.method = "";
        },
        handleNodeClickDialog(data, node) {
            var shut = false;
            var sf = this.form;

            //新增菜单
            if (sf.id == undefined) {
                this.form = Object.assign({}, this.form);
                this.form.pid = node.data.id;
                this.form.parentName = node.data.name;
                return;
            }

            //新增菜单时不执行以下程序
            //修改时上级选择错误，默认的父级菜单
            let parentNode = null;
            if (sf.id) {
                parentNode = this.$refs.tree.getNode(sf.id).parent.data;
            }

            //判断是否选择自己作为上级
            if (this.form.id == data.id) {
                if (parentNode) {
                    //选择默认父级菜单
                    this.form.pid = parentNode.id;
                    this.form.parentName = parentNode.name;
                } else {
                    //
                    this.form.pid = null;
                    this.form.parentName = null;
                }
                this.$message({
                    title: "提示",
                    message: "选择所属上级有误",
                    type: "info",
                    duration: 2000
                });
                return;
            }
            //判断选择的上级是否当前修改的上级
            res(node);
            function res(node) {
                if (!shut) {
                    var n = node.parent;
                    if (null != n) {
                        if (sf.id == n.data.id || sf.id == n.data.pid) {
                            shut = true;
                        }
                        res(n);
                    }
                }
            }
            if (shut == true) {
                if (parentNode) {
                    //选择默认父级菜单
                    this.form.pid = parentNode.id;
                    this.form.parentName = parentNode.name;
                } else {
                    //
                    this.form.pid = null;
                    this.form.parentName = null;
                }
                this.$message({
                    title: "提示",
                    message: "选择所属上级有误",
                    type: "warning",
                    duration: 2000
                });
                return;
            }

            this.form = Object.assign({}, this.form);
            this.form.pid = node.data.id;
            this.form.parentName = node.data.name;
        },
        handleIconRemoveClick() {
            this.form.pid = null;
            this.form.parentName = null;
        },
        handleDialogClose() {
            //关闭窗口回调函数
            this.cancel("form");
        },
        handleResetFilter() {
            //重置过滤条件
            this.getTree();
            this.detail = {};
            this.list = null;
        },

        handleCreate() {
            //添加数据窗口
            this.dialogStatus = "create";
            this.dialogFormVisible = true;
        },
        handleUpdate() {
            //修改数据窗口
            if (this.detail.id) {
                selectOne(this.detail.id).then(response => {
                    this.dialogStatus = "update";
                    this.dialogFormVisible = true;
                    this.form = Object.assign({}, response.data.data);

                    let parentNode = this.$refs.tree.getNode(this.form.id)
                        .parent.data;
                    if (parentNode) {
                        this.form.pid = parentNode.id;
                        this.form.parentName = parentNode.name;
                    }
                });
            } else {
                this.$notify({
                    title: "提示",
                    message: "请选择需要修改的记录",
                    type: "warning",
                    duration: 2000
                });
            }
        },
        handleDelete() {
            //批量删除数据
            if (this.detail.id) {
                this.$confirm("确定要删除？", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        deleted(this.detail.id).then(response => {
                            if (response.data.status === 200) {
                                this.$notify({
                                    title: "提示",
                                    message: "删除成功",
                                    type: "success",
                                    duration: 2000
                                });
                                this.getTree();
                                this.handleResetFilter();
                            } else {
                                this.$notify({
                                    title: "删除失败",
                                    message: response.data.msg,
                                    type: "error",
                                    duration: 2000
                                });
                            }
                        });
                    })
                    .catch(() => {});
            } else {
                this.$notify({
                    title: "提示",
                    message: "请选择需要删除的记录",
                    type: "warning",
                    duration: 2000
                });
            }
        },
        create(formName) {
            //添加数据
            const set = this.$refs;
            set[formName].validate(valid => {
                if (valid) {
                    created(this.form).then(response => {
                        if (response.data.status === 200) {
                            this.$notify({
                                title: "提示",
                                message: "添加成功",
                                type: "success",
                                duration: 2000
                            });
                            this.handleResetFilter();
                        } else {
                            this.$notify({
                                title: "操作失败",
                                message: response.data.msg,
                                type: "error",
                                duration: 2000
                            });
                        }
                        this.dialogFormVisible = false;
                    });
                }
            });
        },
        update(formName) {
            //修改数据
            const set = this.$refs;
            set[formName].validate(valid => {
                if (valid) {
                    updated(this.form).then(response => {
                        if (response.data.status === 200) {
                            this.$notify({
                                title: "提示",
                                message: "修改成功",
                                type: "success",
                                duration: 2000
                            });
                            this.getTree();
                            this.detail = Object.assign({}, this.form);
                        } else {
                            this.$notify({
                                title: "发生错误",
                                message: response.data.msg,
                                type: "error",
                                duration: 2000
                            });
                        }
                        this.dialogFormVisible = false;
                    });
                }
            });
        },

        handleSelectionChange(val) {
            //多选
            this.multipleSelection = val;
        },
        handleDialogClosePermission() {
            //关闭窗口回调函数
            this.cancel("formPermission");
        },
        handleCreatePermission() {
            //添加数据窗口
            this.dialogStatus = "createPermission";
            this.dialogFormVisiblePermission = true;
        },
        handleUpdatePermission(row) {
            //修改数据窗口
            selectOnePermission(row.id).then(response => {
                this.dialogStatus = "updatePermission";
                this.dialogFormVisiblePermission = true;
                this.formPermission = Object.assign({}, response.data.data);
                console.log(this.formPermission);
            });
        },
        handleDeletePermission(row) {
            //批量删除数据
            let ids = [];
            if (row.id != undefined) {
                ids.push(row.id);
            } else {
                if (this.multipleSelection.length > 0) {
                    for (let item of this.multipleSelection) {
                        ids.push(item.id);
                    }
                }
            }
            if (ids.length <= 0) {
                this.$notify({
                    title: "提示",
                    message: "请选择需要删除的记录",
                    type: "warning",
                    duration: 2000
                });
            } else {
                this.$confirm("确定要删除？", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        deletedPermission({ idList: ids }).then(response => {
                            if (response.data.status === 200) {
                                this.$notify({
                                    title: "提示",
                                    message: "删除成功",
                                    type: "success",
                                    duration: 2000
                                });
                                this.getListPermission(this.detail.id);
                            } else if (response.data.status === 601) {
                                this.$notify({
                                    title: "提示",
                                    message: response.data.msg,
                                    type: "warning",
                                    duration: 2000
                                });
                            } else {
                                this.$notify({
                                    title: "删除失败",
                                    message: response.data.msg,
                                    type: "error",
                                    duration: 2000
                                });
                            }
                        });
                    })
                    .catch(() => {});
            }
        },
        getListPermission(menuId) {
            //查询分页列表
            if (menuId) {
                this.listLoading = true;
                findPermissionByMenuId(menuId)
                    .then(response => {
                        if (response.data.status === 200) {
                            this.list = response.data.data;
                            this.listLoading = false;
                        } else {
                            this.$notify({
                                title: "发生错误",
                                message: response.data.msg,
                                type: "error",
                                duration: 2000
                            });
                            this.listLoading = false;
                        }
                    })
                    .catch(error => {
                        this.listLoading = false;
                    });
            }
        },
        createPermission(formName) {
            //添加数据
            const set = this.$refs;
            set[formName].validate(valid => {
                if (valid) {
                    createdPermission(this.formPermission).then(response => {
                        if (response.data.status === 200) {
                            this.$notify({
                                title: "提示",
                                message: "添加成功",
                                type: "success",
                                duration: 2000
                            });
                            this.getListPermission(this.detail.id);
                        } else if (response.data.status === 601) {
                            this.$notify({
                                title: "提示",
                                message: response.data.msg,
                                type: "warning",
                                duration: 2000
                            });
                        } else {
                            this.$notify({
                                title: "操作失败",
                                message: response.data.msg,
                                type: "error",
                                duration: 2000
                            });
                        }
                        this.dialogFormVisiblePermission = false;
                    });
                }
            });
        },
        updatePermission(formName) {
            //修改数据
            const set = this.$refs;
            set[formName].validate(valid => {
                if (valid) {
                    updatedPermission(this.formPermission).then(response => {
                        if (response.data.status === 200) {
                            this.$notify({
                                title: "提示",
                                message: "修改成功",
                                type: "success",
                                duration: 2000
                            });
                            this.getListPermission(this.detail.id);
                        } else if (response.data.status === 601) {
                            this.$notify({
                                title: "提示",
                                message: response.data.msg,
                                type: "warning",
                                duration: 2000
                            });
                        } else {
                            this.$notify({
                                title: "发生错误",
                                message: response.data.msg,
                                type: "error",
                                duration: 2000
                            });
                        }
                        this.dialogFormVisiblePermission = false;
                    });
                }
            });
        },

        handleGenerateDefaultPermission() {
            this.dialogFormVisibleGeneratePermission = true;
            this.formGeneratePermission.menuId = this.detail.id;
        },
        GenerateDefaultPermissionAction(formName) {
            const set = this.$refs;
            set[formName].validate(valid => {
                if (valid) {
                    generateDefaultPermission(this.formGeneratePermission).then(
                        response => {
                            if (response.data.status === 200) {
                                this.$notify({
                                    title: "提示",
                                    message: "修改成功",
                                    type: "success",
                                    duration: 2000
                                });
                                this.getListPermission(this.detail.id);
                                this.cancel(formName);
                            } else if (response.data.status === 601) {
                                this.$notify({
                                    title: "提示",
                                    message: response.data.msg,
                                    type: "warning",
                                    duration: 2000
                                });
                            } else {
                                this.$notify({
                                    title: "发生错误",
                                    message: response.data.msg,
                                    type: "error",
                                    duration: 2000
                                });
                            }
                            this.dialogFormVisibleGeneratePermission = false;
                        }
                    );
                }
            });
        },

        cancel(formName) {
            this.dialogFormVisible = false;
            this.dialogFormVisiblePermission = false;
            this.dialogFormVisibleGeneratePermission = false;
            const set = this.$refs;
            set[formName].resetFields();
            this.form = {
                sort: 100,
                status: true,
                parentName: null
            };
            this.formPermission = {
                sort: 100,
                type: "2",
                status: true,
                menuId: this.detail.id
            };
            this.formGeneratePermission = {
                permissions: ["ui", "add", "delete", "update", "list"]
            };
        }
    }
};
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>
.menu-wrapper {
    border: 1px solid #e9eaec;
    background: #fff;
    border-radius: 4px;
    font-size: 14px;
    position: relative;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    &:hover {
        border-color: #eee;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    }
    .tree-box {
        &-header {
            padding-left: 10px;
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #dcdcdc;
        }
        &-body {
        }
    }

    .content-box {
        border-left: 1px solid #dcdcdc;
        .btn-wrapper {
            padding-left: 10px;
            line-height: 50px;
            border-bottom: 1px solid #dcdcdc;
        }

        .detail-wrapper {
            padding-top: 10px;
            padding-left: 10px;
        }

        .permission-wrapper {
            padding: 10px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
    }
}
</style>